<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="js/libs/charts/echarts-all.js"></script>
<script src="js/widget/kpiCompareChart.js?t=1"></script>
<script src="js/widget/kpiSummaryPieChart.js?t=1"></script>
<script src="js/widget/kpiSummaryGaugeChart.js?t=1"></script>

<style>
<!--
a:HOVER {
	text-decoration: underline; cursor: pointer;
}

.fixed {
	position: fixed;
}

#searchTable .ulist li {
	float: left
}

#tr2 .ulist li,#tr3 .ulist li,#tr5 .ulist li {
	width: 115px
}

#dvFrameMainNav {
	overflow: auto; overflow-x: hidden
}

.crumbs-nav-item .selector-set {
	float: left; margin-right: 5px;
}

.selector-set {
	font-size: 0;
}

.selector-set .ss-item {
	position: relative; display: inline-block; height: 22px; line-height: 22px; border: 1px solid #DDD; font-size: 12px; vertical-align: top; margin: 0 5px 5px 0; padding: 0 26px 0 4px; cursor: pointer;
}

.selector-set .ss-item em {
	color: #e4393c;
}

.selector-set .ss-item i {
	display: block; position: absolute; width: 25px; height: 22px; right: 0; top: 0; background: url('img/search_ele.png') no-repeat 7px -140px;
}

.selector-set .ss-item-const {
	padding-right: 5px;
}

.selector-set .ss-item-const i {
	background: none !important;
}

.selector-set .ss-item b {
	font-weight: 400;
}

.selector-set .ss-item:hover {
	border-color: #e4393c; text-decoration: none
}

.selector-set .ss-item:hover i {
	background-color: #e4393c; background-position: 7px -158px
}

.attr-select  a {
	padding: 0 10px 0 18px; height: 15px; background: url(img/icon_jd.png) no-repeat -70px 3px;
}

.attr-select a:hover {
	color: #E4393C
}

.attr-select .selected a,.attr-select .selected a:hover {
	background: url(img/icon_jd.png) no-repeat -70px -13px; color: #E4393C;
}

.btn-group .btn {
	margin-left: -5px; margin-right: 0; border-radius: 0
}

.m7 {
	margin-left: 10px
}

#sub-menu {
	position: relative; padding-top: 0px; width: 100%; background-color: #fff; border: 1px solid #efefef
}

#sub-menu a:hover {
	text-decoration: underline; color: #333
}

#sub-menu a {
	position: relative; text-align: center; border-radius: 0px; color: #999; display: inline-block; width: 100%; padding: 0 1px 0 0; height: 31px; margin: 0; line-height: 31px; font-size: 12px;
	border-bottom: 1px solid #ddd;
}

#sub-menu a.active {
	color: #fff; background-color: none
}
-->
</style>
<script type="text/javascript">
	var linkTemplate = '<a  id="{id}" name="{id}" data-id="{id}" data-value="{dvalue}" class="ss-item" onclick="removeSearchCondition(\'{id}\')"><b>{namelabel}</b><em>{nametext}</em><i></i></a></li>';

	var linkTemplateConst = '<a  id="{id}" name="{id}" data-id="{id}" data-value="{dvalue}" class="ss-item ss-item-const" ><b>{namelabel}</b><em>{nametext}</em><i></i></a>';

	var aTemplate = '<li><a onclick="changeSearchCondition(\'{id}\',this)" data-value="{dvalue}" data-label="{dlabel}" class="nui-txt-link2" href="javascript:void(0)">{namelabel}</a></li>';

	function renderTemplate(trid, namelabel, nametext, dvalue) {
		return linkTemplate.replaceAll("{id}", "d" + trid).replaceAll("{dvalue}", dvalue).replaceAll("{namelabel}", namelabel).replaceAll("{nametext}", nametext);

	}

	function renderTemplateConst(trid, namelabel, nametext, dvalue) {
		return linkTemplateConst.replaceAll("{id}", "d" + trid).replaceAll("{dvalue}", dvalue).replaceAll("{namelabel}", namelabel).replaceAll("{nametext}", nametext);

	}

	function renderATemplate(trid, namelabel, dlabel, dvalue) {
		return aTemplate.replaceAll("{id}", trid).replaceAll("{dvalue}", dvalue).replaceAll("{namelabel}", namelabel).replaceAll("{dlabel}", dlabel);

	}

	function parseUrl() {
		var actLinkId = $("#sub-menu .active").data("id"), dtype = "day";

		var stype = $("input[name='sortType']:checked").val()

		var url = "&stype=" + stype + "&dtype=" + dtype + "&chartId=" + actLinkId;

		var cdate = $(".selector-set a");
         var turl="";
		$(cdate).each(function(index, item) {
			var $this = $(item);
			url += "&" + $this.data("id") + "=" + $this.data("value");
			turl+="&" + $this.data("id") + "=" + $this.data("value");
		});
		return url;
	}

	function reloadGrid() {

		//reloadSearchPanel(url);

		kpi1.loadData(parseUrl());
		var o = $("#radioGroup button.active");
		if (o && o.length > 0) {
			groupSwitch(true);
		}
	}

	function onclick_groupSwitch(obj) {
		$("#radioGroup button").removeClass("active");
		$(obj).addClass("active");

		groupSwitch(true);
	}

	function groupSwitch(reload) {
		var stype = $("input[name='sortType']:checked").val();

		var obj = $("#radioGroup button.active");

		url = parseUrl() + "&gt=" + $(obj).data("id");

		kpi2.kpiCompareChart("loadData", {
			url : url,
			reload : reload,
			stype : stype
		});
	}

	function reloadSearchPanel(url) {
		isperp.showLoading();
		$.get("kpi/incident/reloadQueryPanelData?projectId=${projectId}" + url, function(data) {

			generalAlink(data.confirmtimeman_id, "tr2");
			generalAlink(data.solver_id, "tr3");
			generalAlink(data.icd_category_name, "tr4");
			generalAlink(data.app_department_name, "tr5");
			isperp.hideLoading();
			return data;
		})
	}

	function generalAlink(data, trid) {
		if (data) {
			var typeh = "";
			for ( var key in data) {
				var ahtml = renderATemplate(trid, data[key].label + "(" + data[key].count + ")", data[key].label, key);
				typeh += ahtml;
			}
			$("#" + trid + " .ulist").html(typeh);
		} else {
			$("#" + trid + " .ulist").html("");
		}
	}

	function changeSearchConditionByTree(event, treeId, treeNode) {

		var h;
		if ("departmentTree" == treeId) {
			h = renderTemplate("scl1", "处理部门：", treeNode.name, treeNode.id);
			$("#scl1").html(h);
		} else if ("departmentTree2" == treeId) {
			h = renderTemplate("scl2", "供应商：", treeNode.name, treeNode.id);
			$("#scl2").html(h);
		} else if ("categoryTree" == treeId) {
			h = renderTemplate("tr4", "分类：", treeNode.name, treeNode.name);
			$("#sctr4").html(h);
		}else if("projectSelector"==treeId)
		{
		   var projId=$("#projectSelector").val();
		   var projName=$("#projectSelector").find("option:selected").text();
		   h = renderTemplate("tr6", "项目：", projName, projId);
			$("#sctr6").html(h);
		}
		reloadGrid();
	}

	function getMonthDays(year, month) {
		var nextMonthDate = new Date(year, month + 1, 1);
		var days = (nextMonthDate - wStartDate) / (1000 * 60 * 60 * 24);
		return days;
	}

	function getDateCondition(year, month, day, dtype) {
		year = parseInt(year), month = parseInt(month) - 1, day = parseInt(day);

		var startDate = new Date(year, month, day), wStartDate, wEndDate;

		if ("month" == dtype) {
			wStartDate = new Date(year, month, 1);
			var nextMonthDate = new Date(year, month + 1, 1);

			var days = (nextMonthDate - wStartDate) / (1000 * 60 * 60 * 24);

			wEndDate = new Date(year, month, days);
			$("#qsDay").hide();
		} else if ("week" == dtype) {
			//获得本周的开始日期
			wStartDate = new Date(year, month, day - startDate.getDay());
			//获得本周的结束日期
			wEndDate = new Date(year, month, day + (6 - startDate.getDay()));
			$("#qsDay").show();
		} else {
			wStartDate = startDate;
			wEndDate = startDate;
			$("#qsDay").show();
		}

		return wStartDate.format("yyyy-MM-dd") + "~" + wEndDate.format("yyyy-MM-dd");
	}

	function removeSearchCondition(id) {
		if ("dscl1" == id) {
			$("#departmentTree").val("");
		} else if ("dscl2" == id) {
			$("#departmentTree2").val("");
		} else if ("dtr4" == id) {
			$("#categoryTree").val("");
		}else if ("dtr6" == id) {
			$("#projectSelector").val("");
			$("#projectSelector").trigger("chosen:updated");
		}

		$(".selector-set #" + id).remove();
		reloadGrid();
	}

	function changeSearchCondition(trid, obj) {
		var namelabel = $("#searchTable #" + trid + " .td1").text(), nametext = $(obj).data("label"), v = $(obj).data("value");
		var sctr = $("#sc" + trid), dtr = sctr.find("#d" + trid);

		if (dtr.length > 0) {
			dtr.data("value", dtr.data("value") + "," + v);
			var emt = dtr.find("em");
			emt.html(emt.html() + "、" + nametext);
		} else {
			sctr.html(renderTemplate(trid, namelabel, nametext, v));
		}
		reloadGrid();
	}

	function changeSearchConditionConst(trid, obj) {
		var namelabel = $("#searchTable #" + trid + " .td1").text(), nametext = $(obj).data("label"), v = $(obj).data("value");

		$("#sc" + trid).html(renderTemplateConst(trid, namelabel, nametext, v));

		reloadGrid();
	}

	function openKpiDataView(param, gt) {
		var stype = $("input[name='sortType']:checked").val();

		var obj = $("#radioGroup button.active"), url = parseUrl();
		var title = $("#sub-menu a.active").text();

		if (param) {

			url += " " + "&gtvalue=" + param.name;
			title += "-" + param.name;
		}

		if (gt) {
			url += "&gt=" + $(obj).data("id");
		}
		
		var moduleName='${moduleName}';
		if(moduleName=="INCIDENT")
		{
		   isperp.openDialog({
			title : title,
			contentUrl : "kpi/incident/dataView?url=" + encodeURIComponent(url)
		   });
		}else if(moduleName=="CHANGE")
		{
		    isperp.openDialog({
			title : title,
			contentUrl : "kpi/change/dataView?url=" + encodeURIComponent(url)
		   });
		}
		
	}
</script>
<div id="dvFrameMainNav" class="frame-main-nav" style="width:140px">
	<div
		style="font-size: 14px;padding:5px 10px;background: #F7F7F7;color:#666">KPI指标</div>
	<div id="sub-menu" class="frame-main-nav">
		<div id="accordion" style="width:138px;border-right:1px solid #ddd">

			<c:forEach items="${kpiTypes }" var="kpiType">
				<h3>${kpiType.name }</h3>
				<ul style="display: none;overflow: hidden">
					<c:forEach items="${kpis }" var="item">
						<c:if test="${kpiType.name eq  item.type}">
							<li><a class="link-base " href="javascript:void(0);"
								data-description="${item.description }"
								data-unit="${item.showUnit }" data-ctype="${item.showType }"
								data-id="${item.id }" data-title="${item.title }"
								onclick="changeKPI(this);"> ${item.title } </a>
							</li>
						</c:if>
					</c:forEach>
				</ul>
			</c:forEach>
		</div>
	</div>
</div>
<section id="mainContent" class="frame-main-cont frame-main-cont-first"
	style="top:0px;left:150px" role="main">

	<div style="float:left;line-height: 25px;font-size: 14px;color:#666">查询条件：</div>
	<div class="selector-set">
		 <span id="sctr1"> 
		</span><span
			id="scl1"></span> <span id="scl2"></span><span id="sctr2"></span><span
			id="sctr5"><span id="sctr6"></span><span id="sctr4"></span><span id="sctr3"></span>
	</div>

	<table class="form-table" id="searchTable">

		<tr id="tr1">
				<td class="td1">请求日期：</td>
				<td class="td2" style="position: relative;" colspan="2">
					<div id="dateSelector"  style="display:inline-block;">
						<select id="idYear" name="idYear" data="" data-width="70px"
							onchange="changeSearchConditionByDate(this,1)"
							data-allow-empty="false" data-width="70px"></select>
						年
						<select
							data-width="60px" id="idMonth" name="idMonth" data=""
							data-width="60px" onchange="changeSearchConditionByDate(this,2)"
							data-allow-empty="false"></select>
						月
						<select id="idDay"
							data-width="60px" data-width="60px" name="idDay" data=""
							onchange="changeSearchConditionByDate(this,3)"></select></div>

					&nbsp;&nbsp;至 &nbsp;&nbsp;
					<div id="dateSelector1" style="display:inline-block;">
						<select id="idYear1" name="idYear1" data="" data-width="70px"
							onchange="changeSearchConditionByDate(this,1)"
							data-allow-empty="false" data-width="70px"></select>年 <select
							data-width="60px" id="idMonth1" name="idMonth1" data=""
							data-width="60px" onchange="changeSearchConditionByDate(this,2)"
							data-allow-empty="false"></select>月 <select id="idDay1"
							data-width="60px" data-width="60px" name="idDay1" data=""
							onchange="changeSearchConditionByDate(this,3)"></select>
					</div> 
				</td>

			</tr>
		<tr>
			<td class="td1">处理部门：</td>
			<td class="td2" style="position: relative;"><input
				id="hidDepartmentId" type="hidden"> <isperp:treeSelector
					displayValueCssStyle="width:220px"
					url="app/department/getTree" asyncLoad="false"
					onlySelectLeaf="false" id="departmentTree" displayValue=""
					displayColumn="name" valueControlId="hidDepartmentId"
					expandAllNode="true"
					afterSelected="changeSearchConditionByTree(undefined,'departmentTree',treeNode)"></isperp:treeSelector>

			</td>
		</tr>
		<tr id="tr5" style="display:none">
			<td class="td1 ">供应商：</td>

			<td class="td2  attr-select"><input id="hidDepartmentId2"
				type="hidden"><input id="hidDepartmentId" type="hidden">
				<isperp:treeSelector displayValueCssStyle="width:220px"
					onlySelectLeaf="false"
					url="app/department/getTree?parentId=2321745182907321210"
					asyncLoad="false" id="departmentTree2" displayValue=""
					displayColumn="name" valueControlId="hidDepartmentId2"
					expandAllNode="true"
					afterSelected="changeSearchConditionByTree(undefined,'departmentTree2',treeNode)"></isperp:treeSelector>
			</td>
		</tr>
		<tr id="tr4">
			<td class="td1 ">分类：</td>
			<td class="td2  attr-select"><input id="hidIncidentCategory"
				type="hidden"> <isperp:treeSelector
					displayValueCssStyle="width:220px" url="incident/category/getTree"
					asyncLoad="true" id="categoryTree" displayValue=""
					displayColumn="name" valueControlId="hidIncidentCategory"
					afterSelected="changeSearchConditionByTree(undefined,'categoryTree',treeNode)"></isperp:treeSelector>
			</td>
		</tr>
		
		<tr id="tr6">
			<td class="td1">项目：</td>
			<td class="td2  attr-select">
			   <select class="search" id="projectSelector"  onchange="changeSearchConditionByTree(undefined,'projectSelector','')" data-width="230px;">
			      <option id=""></option>
			      <c:forEach items="${projects }" var="pj">
			        <option id="${pj.id }" value="${pj.id }" data-name="${pj.name }">${pj.name }</option>
			      </c:forEach>
			   </select>
			</td>
		</tr>





	</table>

	<div class="m m7 help">

		<div class="mc">
			<div id="kpi_main">

				<div
					style="width:auto;display:inline-block; padding:10px 20px;color:#fff; font-size: 18px;background-color:#61a9dc">
					<a id="lbKpiTitle" style="color:#fff;"
						onclick="openKpiDataView(undefined,false)"></a>


				</div>
				<p id="lbKpiTitleDes" style="font-size:14px;margin-bottom:15px"></p>

				<table style="width:100%;">
					<tr>
						<td style="width:40%;">
							<h2 style="font-weight: 500;font-size: 17px;color:#222">总体分析</h2>

							<div id="kpi_main_chart1" style="height:300px;"></div></td>
						<td style="width:55%;">
							<div id="kpi_main_chart2" style="height:300px;"></div></td>
					</tr>
				</table>

			</div>

		</div>
	</div>

	<div class="m m7 help">
		<div class="mt">
			<h3 class="btn-group" data-toggle="buttons-radio" id="radioGroup">
				
				
				<c:choose>
				    <c:when test="${moduleName eq 'INCIDENT' }">
				       <button data-id="2" type="button" class="btn btn-small "
					onclick="onclick_groupSwitch(this)">解决部门</button>
				<button data-id="3" type="button" class="btn btn-small "
					onclick="onclick_groupSwitch(this)">事件分类</button>
				<button data-id="4" type="button" class="btn btn-small"
					onclick="onclick_groupSwitch(this)">二线工程师</button>
				<button data-id="5" type="button" class="btn btn-small"
					onclick="onclick_groupSwitch(this)">事件性质</button>
				<button data-id="6" type="button" class="btn btn-small"
					onclick="onclick_groupSwitch(this)">事件优先级</button>
				    </c:when>
				    <c:when test="${moduleName eq 'CHANGE' }">
				       <button data-id="2" type="button" class="btn btn-small "
					onclick="onclick_groupSwitch(this)">实施部门</button>
				<button data-id="3" type="button" class="btn btn-small "
					onclick="onclick_groupSwitch(this)">变更分类</button>
				<button data-id="4" type="button" class="btn btn-small"
					onclick="onclick_groupSwitch(this)">实施者</button>
				<button data-id="5" type="button" class="btn btn-small"
					onclick="onclick_groupSwitch(this)">变更类型</button>
				<button data-id="6" type="button" class="btn btn-small"
					onclick="onclick_groupSwitch(this)">风险等级</button>
				    </c:when>
				</c:choose>
				
				

				&nbsp;TOP分析：<input type="radio" name="sortType"
					onclick="groupSwitch(false)" value="10" checked="checked"
					id="sortType1"><label for="sortType1">前10名</label> &nbsp;<input
					type="radio" id="sortType2" name="sortType"
					onclick="groupSwitch(false)" value="-10"><label
					for="sortType2">后10名</label> &nbsp;<input type="radio"
					name="sortType" onclick="groupSwitch(false)" value="100"
					id="sortType3"><label for="sortType3">所有</label>

			</h3>
		</div>
		<div class="mc">
			<div id="kpia">
				<div id="kpia_chart1" style="height:300px;"></div>
				<div id="kpia_chart2" style="height:300px;"></div>
			</div>
		</div>
	</div>

</section>



<script type="text/javascript">
    function selectProject()
    {
       changeSearchConditionByDate();
    }
	var kpi1 = $("#kpi_main").kpiSummaryPieChart({
		name : "事件总数",
		chart1 : {
			text : ""
		},
		countLabel : "lbKpiTitle"
	});
	var kpi2 = $("#kpia").kpiCompareChart({
		chart1 : {
			text : "对比分析"
		},
		chart2 : {
			text : "趋势分析"
		}
	});

	function changeKPI(obj) {
		var $obj = $(obj);
		$("#sub-menu a").removeClass("active");
		$obj.addClass("active");

		var cid = $obj.data("id"), ctype = $obj.data("ctype");

		//kpi1.dispose();

		kpi2.kpiCompareChart("clear");

		$("#lbKpiTitleDes").html($obj.data("description"))

		if ("饼图" == ctype) {
			kpi1 = $("#kpi_main").kpiSummaryPieChart({
				name : $obj.text(),
				chartId : cid,
				chart1 : {
					text : ""
				},
				countLabel : "lbKpiTitle",
				unit : $obj.data("unit")
			});

		} else {
			kpi1 = $("#kpi_main").kpiSummaryGaugeChart({
				name : $obj.text(),
				chartId : cid,
				chart1 : {
					text : ""
				},
				countLabel : "lbKpiTitle",
				unit : $obj.data("unit")

			});
		}
		$("#kpia").kpiCompareChart("clear");
		$("#kpia").kpiCompareChart("option", "chartType");

		reloadGrid();
	}

	$("#accordion").accordion({
		animated : false,
		autoHeight : false,
		heightStyle : "content"
	});

		var myDate = new Date();
	$("#dateSelector").DateSelector({
		ctlYearId : 'idYear',
		ctlMonthId : 'idMonth',
		ctlDayId : 'idDay',
		defYear : myDate.getFullYear(),
		defMonth : (myDate.getMonth() + 1),
		defDay : 1,
		minYear : 2016,
		maxYear : (myDate.getFullYear() + 1)
	});
	$("#dateSelector1").DateSelector({
		ctlYearId : 'idYear1',
		ctlMonthId : 'idMonth1',
		ctlDayId : 'idDay1',
		defYear : myDate.getFullYear(),
		defMonth : (myDate.getMonth() + 1),
		defDay : myDate.getDate(),
		minYear : 2016,
		maxYear : (myDate.getFullYear() + 1)
	});
	
    function changeSearchConditionByDate(obj, t) {
		var y = $("#idYear").val(), m = $("#idMonth").val(), d = $("#idDay").val(), label, name;
		var y1 = $("#idYear1").val(), m1 = $("#idMonth1").val(), d1 = $("#idDay1").val(),label1,name1;

		if (d) {
			label = y + "年" + m + "月" + d + "日";
			name = y + "-" + m + "-" + d;
			
			label1 = y1 + "年" + m1 + "月" + d1 + "日";
			name1 = y1 + "-" + m1 + "-" + d1;
		}

		var h = renderTemplateConst("tr1", "请求日期", label+"~"+label1, name+"~"+name1, name+"~"+name1);
		$("#sctr1").html(h);

		reloadGrid();
	}

	var getScrollY = function() {
		scrOfY = 0;
		if (typeof (window.pageYOffset) == "number") {
			scrOfY = window.pageYOffset;
		} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
			scrOfY = document.body.scrollTop;
		} else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
			scrOfY = document.documentElement.scrollTop;
		}
		return scrOfY;

	}

	var pos_fixed_start_y = 0;
	var pos_fixed_stop_y = $(document).height() - $(window).height();
	$(window).scroll(function() {

		var y = getScrollY();

		if (y == 0) {
			$("#dvFrameMainNav").css({
				height : 'auto'
			});
		}
		var nav = $('#dvFrameMainNav');
		if (y >= pos_fixed_start_y && y <= pos_fixed_stop_y) {
			nav.addClass('fixed');
			resetTagTreeHeight();
		} else if (y > pos_fixed_stop_y) {
			nav.addClass('fixed');
			resetTagTreeHeight2();
		} else {
			nav.removeClass('fixed');
		}
	});

	var resetTagTreeHeight = function() {
		var tt = $("#dvFrameMainNav");
		var height = $(window).height();
		tt.css({
			height : height
		});
	};

	var resetTagTreeHeight2 = function() {
		var tt = $("#dvFrameMainNav");
		var height = $(window).height();
		tt.css({
			height : height
		});
	};

	resetTagTreeHeight2();

	$(document).ready(function() {

		$("#sub-menu a:first").addClass("active");

		changeSearchConditionByDate();
		reloadGrid();

		$("#radioGroup button:first").click();
	});
</script>